import Overlay from "ol/Overlay";
import { Map } from "ol";

// 自定义弹窗类
export class CustomPopup {
    private popupElement: HTMLElement;
    private overlay: Overlay;
    private map: Map;
    constructor() {
        this.popupElement = document.createElement('div'); // 创建一个弹窗元素
        this.popupElement.className = 'ol-popup'; // 设置弹窗样式

        // 创建 Overlay 实例
        this.overlay = new Overlay({
            element: this.popupElement, // 绑定元素
            autoPan: true // 自动平移以确保弹窗可见
        });

        this.map = (window as any).olMap.map  // 获取map对象

        this.map.addOverlay(this.overlay)    // 将 Overlay 添加到地图中
    }

    // 弹窗内容设置
    setPopupContent(content: any) {
        this.popupElement.innerHTML = content;
    }

    // 显示弹窗
    showPopup(coordinate: [number, number]) {
        this.overlay.setPosition(coordinate);
        this.popupElement.style.display = 'block'; // 显示弹窗
    }

    // 隐藏弹窗
    hidePopup() {
        this.popupElement.style.display = 'none'; // 隐藏弹窗
    }


    // 处理地图点击事件，点击后显示弹窗
    public handleMapClick(event: any) {
        const coordinate = event.coordinate; // 获取点击的坐标
        const feature = this.map.forEachFeatureAtPixel(event.pixel, (feature) => feature);
        if (feature) {
            const content = feature.get('description') || '没有描述信息';
            this.setPopupContent(content); // 设置弹窗内容
            this.showPopup(coordinate); // 显示弹窗
        } else {
            this.hidePopup(); // 没有点击到要素时隐藏弹窗
        }
    }
}